<template>
    <div id="app">
        <header ref="bs" class="head">
            <ul class="navlist" ref="navlist">
                <li v-for="(item,index) in myNavlist" :key="item.id" @click="change(item.type,index)" :class="{'active':item.type === type}">{{item.type}}</li>
            </ul>
            <div class="icon" @click="visible=true"></div>
        </header>
        <div class="con">
            <el-item v-for="item in curList" :title="item.title" :con="item.con" :key="item.id"></el-item>
        </div>
        <footer>
            底部
        </footer>
        <el-dialog title="所有频道" :visible="visible" @close="close">
            <div>
                <h1>我的频道 <button @click="edit">{{status ? '完成' :'编辑'}}</button></h1>
                <div>
                    <el-type v-for="item in myNavlist" 
                        :key="item.id" 
                        :type="item.type"
                        :isAdd="item.isAdd"
                        :isDisabled="item.isDisabled"
                        :status="status"
                        :id="item.id"
                        @changeNav="changeNav"
                    ></el-type>
                </div>
            </div>
            <div>
                <h1>更多频道</h1>
                <div>
                    <el-type v-for="item in moreNavList"
                        :key="item.id"
                        :type="item.type"
                        :isAdd="item.isAdd"
                        :isDisabled="item.isDisabled"
                        :id="item.id"
                        @changeNav="changeNav"
                    ></el-type>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from 'vuex';
import BetterScroll from 'better-scroll';
import elDialog from '@/components/el-dialog.vue';
import elItem from '@/components/el-item.vue';
import elType from '@/components/el-type.vue';
export default {
    data(){
        return {
            visible:false,
            type:"推荐",
            status:false
        }
    },
    created(){
        //获取导航的数据
        this.getNavList();
        //获取列表的数据
        this.getList()

    },
    mounted(){
        this.bs = new BetterScroll(this.$refs.bs,{
            scrollX:true,
            click:true
        })
    },
    components:{
        elDialog,
        elItem,
        elType
    },
    computed:{
        ...mapState(['navlist','list']),
        myNavlist(){
            return this.navlist.filter(item => item.isAdd)
        },
        curList(){
            return this.list.filter(item => item.type === this.type)
        },
        moreNavList(){
            return this.navlist.filter(item => !item.isAdd);
        }
    },
    methods:{
        ...mapActions(['getNavList','getList']),
        ...mapMutations(['changeNav']),
        close(){
            this.visible = false;
        },
        change(type,index){
            this.type = type;
            this.bs.scrollToElement(this.$refs.navlist.children[index],0,true);
        },
        edit(){
            this.status = !this.status;
        }
    },
    watch:{
        navlist(){
            //确保你的dom渲染完毕
            this.$nextTick(() =>{
                let lis =  this.$refs.navlist.children;
                let w = 0;
                lis.forEach(item => {
                    w += (item.offsetWidth+20)
                })
                this.$refs.navlist.style.width = w+'px';
                this.bs.refresh();
            })
        }
    }
}
</script>

<style lang="scss">
*{
    margin:0;
    padding:0;
    list-style: none;
}

html,body,#app{
    width:100%;
    height: 100%;
    overflow: hidden;
}
#app{
    display: flex;
    flex-direction: column;
}

.head,footer{
    width:100%;
    height: 44px;
    line-height: 44px;
}
.head{
    position: relative;
}

.navlist{
    display: flex;
    padding-right:40px;
    li{
        margin:0 10px;
        flex-shrink: 0;
    }
}

.con{
    width:100%;
    flex:1;
    overflow: auto;
    border-top:1px solid gray;
    border-bottom:1px solid gray;
}

.icon{
    width:44px;
    height: 44px;
    background: rgba(0,0,0,.5);
    position: absolute;
    top:0;
    right:0;
    z-index:999;
}

.active{
    color:red;
}
</style>
